<template>
  <div id="app">
    <div v-if="!isLogin">
      <router-view></router-view>
    </div>
    <div v-else>
      <el-row>
        <el-col :span="4">
          <div class="navigation">
            <nav-menu :isCollapse="isCollapse"></nav-menu>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="view">
            <el-row>
              <div>
                <div class="userinfo">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      {{this.$store.state.userInfo.username}}
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item><span @click="loginOut">登出</span></el-dropdown-item>
                      <el-dropdown-item><span @click="shouye">首页</span></el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <el-breadcrumb
                  separator="/"
                  class="header"
                >
                  <el-breadcrumb-item>
                    <i
                      class="el-icon-s-fold toggerBtn"
                      @click="togger"
                    ></i>
                  </el-breadcrumb-item>
                  <el-breadcrumb-item>电商管理后台</el-breadcrumb-item>
                  <el-breadcrumb-item v-if="this.$route.meta.parent">{{this.$route.meta.parent}}</el-breadcrumb-item>
                  <el-breadcrumb-item>{{this.$route.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </el-row>
            <el-row>
              <router-view></router-view>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import navMenu from "./components/navMenu/navMenu";
import loginPage from "./components/login/loginPage";
import registerPage from "./components/login/registerPage";
import { mapState } from "vuex";
export default {
  name: "App",
  components: {
    navMenu,
    loginPage,
  },
  data: function () {
    return {
      isCollapse: false,
    };
  },
  computed: {
    isLogin: function () {
      return this.$store.state.isLogin;
    },
  },
  methods: {
    togger() {
      this.isCollapse = !this.isCollapse;
    },
    shouye() {
      this.$router.push('/home')
    },
    loginOut() {
      window.localStorage.setItem('userInfo', '{}');
      this.$store.commit('loginOut');
      this.$router.push('/login')
    }
  },
};
</script>

 <style  lang="less">
a,
blockquote,
body,
dd,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
i,
input,
label,
li,
ol,
p,
pre,
span,
strong,
sub,
sup,
table,
td,
th,
thead,
tr,
tt,
u,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
*,
:after,
:before {
  user-select: none;
  box-sizing: border-box;
}
body {
  margin: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-variant: tabular-nums;
  line-height: 1.5;
  background-color: #fff;
  font-feature-settings: "tnum";
}
.navigation {
  height: 100vh;
  overflow: auto;
  background-color: #0d1e30;
}
.toggerBtn {
  font-size: 20px;
  cursor: pointer;
}
.view {
  height: 100vh;
  overflow: auto;
}
.navigation::-webkit-scrollbar,
.view::-webkit-scrollbar {
  width: 0 !important;
}
.el-menu {
  border: none;
}
.header {
  height: 50px;
  line-height: 50px;
  border-radius: 0px !important;
  padding-left: 20px;
  border-bottom: 1px solid #dcdfe6;
}
.userinfo {
  position: absolute;
  top: 0;
  right: 0;
  .el-dropdown-link {
    display: block;
    cursor: pointer;
    height: 50px;
    line-height: 50px;
    margin-right: 20px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
